<template>
  <div class="body-box">
    <template v-if="weldShow">
      <template v-if="show">
        <el-row class="btn-box">
          <el-button type="primary" class="add-btns" icon="el-icon-plus" @click="addHandle">添加</el-button>

          <el-button type="primary" icon="el-icon-delete" @click="deleteHandle">删除</el-button>
        </el-row>
        <el-table v-loading="tableLoading" :data="cardData" border style="width: 90%; margin: 0 auto"
          :header-cell-style="{ background: '#f5f7fa' }" @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" width="55" />
          <el-table-column prop="productNum" align="center" label="产品编号" />
          <el-table-column align="center" label="项目信息">
            <template slot-scope="scope">
              <span v-if="scope.row.projectInfo">{{
                scope.row.projectInfo.screenName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="rulesNum" label="规程编号" align="center" />
          <el-table-column prop="drawingNum" label="图号" align="center" />
          <el-table-column prop="date" label="图片" align="center">
            <template slot-scope="scope">
              <el-image :src="scope.row.image | imgPath">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="flawDetection" label="探伤代码" align="center" />
          <el-table-column prop="weldNum" label="焊口编号" align="center" />
          <el-table-column prop="address" label="焊接工艺编号(唯一)" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.craftsInfo">{{
                scope.row.craftsInfo.craftsNumber
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="焊接方法" align="center">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.weldingMethodList?scope.row.weldingMethodList.map((item) => item.name).join("+"): ''
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="焊工持证项目">
            <template slot-scope="scope">
              <span>
                {{
                  scope.row.welderCertificatedList?scope.row.welderCertificatedList
                    .map((item) => item.name)
                    .join("和"): ''
                }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="无损检测要求" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.losslessDetList">{{
                scope.row.losslessDetList.map((item) => item.name).join("、")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="viewHandle(scope.row)">查看</el-button>
              <el-button type="text" size="small" @click="editHandle(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="weldHandle(scope.row)">施焊记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pagination" :current-page.sync="page.p" background layout="prev, pager, next" :total="ts"
          @current-change="getTable" />
      </template>
      <template v-else-if="!show">
        <el-row>
          <div class="title">{{ title }}</div>
          <el-button type="primary" icon="el-icon-refresh-right" @click="returnHandle">返回列表</el-button>
          <el-button v-print="{
              id: 'printMe',
              popTitle: ''
            }" type="primary" icon="el-icon-printer">打印</el-button>
        </el-row>

        <table id="printMe" border="1" width="95%" style="border-collapse: collapse; margin: 20px auto">
          <tr>
            <td colspan="1">
              <span v-if="viewShow">
                <wise-file v-model="obj.logo" class="image" :limit="1" upload-type="avatar" /></span>
              <span v-else>
                <wise-file v-model="obj.logo" class="image" :limit="1" upload-type="avatar" :disableds="disabled" />
              </span>
            </td>
            <td colspan="6" class="text-size"><span>焊缝识别卡</span></td>
            <td>规程编号</td>
            <td>
              <span v-if="viewShow">
                <el-input v-model="obj.rulesNum" placeholder="请输入规程编号" /></span>
              <span v-else>
                <span v-if="obj.rulesNum">{{ obj.rulesNum }}</span>
              </span>
            </td>
          </tr>
          <tr>
            <td>产品编号</td>
            <td>
              <el-input v-if="viewShow" v-model="obj.productNum" placeholder="请输入产品编号" />
              <span v-else>{{ obj.productNum }}</span>
            </td>
            <td>项目编号</td>
            <td colspan="5">
              <!-- <span v-if="viewShow">
                <el-input v-model="obj.welderNumber" /></span>
              <span v-else>
                <span v-if="obj.projectInfo">{{obj.projectInfo.welderNumber}}</span>
              </span> -->
              <span> {{projectInfo.welderNumber}}</span>
            </td>
            <td>探伤代码</td>
          </tr>
          <tr>
            <td>图号</td>
            <td>
              <el-input v-if="viewShow" v-model="obj.drawingNum" placeholder="请输入图号" />
              <span v-else>{{ obj.drawingNum }}</span>
            </td>
            <td>项目名称</td>
            <td colspan="5">
              <span>{{projectInfo.name}}</span>
              <!-- <span v-if="viewShow">
                <el-input v-model="obj.name" /></span> -->
              <!-- <span><span v-if="obj.projectInfo">{{obj.projectInfo.screenName}}</span></span> -->
            </td>
            <td>
              <el-input v-if="viewShow" v-model="obj.flawDetection" placeholder="请输入探伤代码" />
              <span v-else>{{ obj.flawDetection }}</span>
            </td>
          </tr>
          <tr>
            <td>
              <span>接头简图</span>
              <span class="text-color">（上传图片）</span>
            </td>
            <td>焊口编号</td>
            <td colspan="2">焊接工艺编号/修改号</td>
            <td>焊接方法</td>
            <td colspan="3">焊工持证项目</td>
            <td>无损检测要求</td>
          </tr>
          <tr>
            <td rowspan="6">
              <span v-if="viewShow">
                <wise-file v-model="obj.image" :limit="1" upload-type="avatar" /></span>
              <span v-else>
                <wise-file v-model="obj.image" :limit="1" upload-type="avatar" :disableds="disabled" /></span>
            </td>
            <td>
              <el-select v-if="viewShow" v-model="obj.weldNum" placeholder="请选择焊口编号" multiple>
                <el-option v-for="(item, index) in weldNumList" :key="index" :label="item.jointNumber"
                  :value="item.jointNumber" />
              </el-select>
              <span v-else>{{ obj.weldNum.join(",") }}</span>
            </td>
            <td colspan="2" class="text-color">
              <el-select v-if="viewShow" v-model="obj.craftsId" placeholder="请选择焊接工艺编号/修改号" @change="onChange">
                <el-option v-for="(item, index) in craftsInfoList" :key="index" :label="item.craftsNumber"
                  :value="item.id" />
              </el-select>
              <span v-else><span v-if="obj.craftsInfo">{{
                obj.craftsInfo.craftsNumber
              }}</span></span>
            </td>
            <td>
              <el-select v-if="viewShow" v-model="obj.weldingMethodId" placeholder="请选择焊接方法" multiple>
                <el-option v-for="(item, index) in methodsList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
              <span v-else><span v-if="obj.weldingMethodList">{{
                obj.weldingMethodList.map((item) => item.content).join("+")
              }}</span></span>
            </td>
            <td colspan="3">
              <el-select v-if="viewShow" v-model="obj.welderCertificatedId" placeholder="请选择焊工持证项目" multiple>
                <el-option v-for="(item, index) in projectList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
              <span v-else><span v-if="obj.welderCertificatedList">{{
                obj.welderCertificatedList
                  .map((item) => item.content)
                  .join("和")
              }}</span></span>
            </td>
            <td>
              <el-select v-if="viewShow" v-model="obj.losslessDetId" class="detection" placeholder="请输入无损检测要求" multiple>
                <el-option v-for="(item, index) in detectionList" :key="index" :label="item.name" :value="item.id" />
              </el-select>
              <span v-else><span v-if="obj.losslessDetList">{{
                obj.losslessDetList.map((item) => item.content).join(",")
              }}</span></span>
            </td>
          </tr>
          <tr>
            <td rowspan="2">层-道</td>
            <td rowspan="2">焊接方法</td>
            <td colspan="2">填充金属</td>
            <td>焊接电流</td>
            <td>电弧电压</td>
            <td>焊接速度</td>
            <td>线能量</td>
          </tr>
          <tr>
            <td>牌号</td>
            <td>直径</td>
            <!-- <td>极性</td> -->
            <td>电流（A）</td>
            <td>（v）</td>
            <td>（cm/min）</td>
            <td>（kj/cm）</td>
          </tr>

          <tr v-for="(item, index) in tableData" v-show="tableData" :key="index">
            <td v-if="index >= 3" />
            <td v-if="item.weldingLayerNumber">
              {{ item.weldingLayerNumber }}
            </td>
            <td v-else>暂无数据</td>
            <td v-if="item.weldMethod">{{ item.weldMethod }}</td>
            <td v-else>暂无数据</td>
            <td v-if="item.model">{{ item.model }}</td>
            <td v-else>暂无数据</td>
            <td v-if="item.specification">{{ item.specification }}</td>
            <td v-else>暂无数据</td>
            <!-- <td>正接</td> -->
            <td v-if="item.electricCurrentMin || item.electricCurrentMax">
              {{ item.electricCurrentMin }}~{{ item.electricCurrentMax }}
            </td>
            <td v-else>暂无数据</td>
            <td v-if="item.voltageMin || item.voltageMax">
              {{ item.voltageMin }}~{{ item.voltageMax }}
            </td>
            <td v-else>暂无数据</td>
            <td v-if="item.weldingSpeedMin || item.weldingSpeedMax">
              {{ item.weldingSpeedMin }}~{{ item.weldingSpeedMax }}
            </td>
            <td v-else>暂无数据</td>
            <td v-if="item.weldingHeatInputMax">
              {{ item.weldingHeatInputMax }}
            </td>
            <td v-else>暂无数据</td>
          </tr>

          <tr v-show="tableData.length == 0">
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
          </tr>
        </table>

        <el-row v-if="show != viewShow" class="close">
          <el-button type="primary" @click="appendHandle">确定{{ title }}</el-button>
          <el-button type="primary" @click="show = true">取消</el-button>
        </el-row>
      </template>
    </template>
    <template v-else>
      <weldTable :card-id="cardId" @closepop="closepop" />
    </template>
  </div>
</template>
<script>
  import {
    postHandle
  } from '@/api'
  import {
    mapGetters
  } from 'vuex'
  import WiseFile from '@/components/Crud/components/wiseFile'
  import weldTable from './weldTable.vue'
  export default {
    name: 'IdentificationManage',

    components: {
      WiseFile,
      weldTable
    },

    data() {
      return {
        disabled: true,
        cardId: '',
        craftsId: '',
        ts: null,
        show: true,
        weldShow: true,
        title: '',
        viewShow: false,
        tableLoading: true,
        dialogVisible: false,
        cardData: [],
        craftsNum: '',
        id: '',
        obj: {
          productNum: '',
          // welderNumber: '',
          drawingNum: '',
          rulesNum: '',
          name: '',
          welderCertificatedId: [],
          weldNum: [],
          craftsId: '',
          flawDetection: '',
          losslessDetId: [],
          weldingMethodId: [],
          image: '',
          spaceId: '',
          logo: ''
        },
        weldNumList: [],
        craftsInfoList: [],
        methodsList: [],
        projectList: [],
        detectionList: [],
        tableData: [],
        ids: [],
        page: {
          p: 1,
          ps: 10
        }
      }
    },

    computed: {
      ...mapGetters(['spaceId']),

      projectInfo() {
        return this.$store.state.project.object
      }
    },

    created() {
      if (this.show == false) {
        this.getData()
      } else {
        this.getTable()
      }
    },

    methods: {
      getTable() {
        const params = {
          d: {
            filters: [{
                field: 'spaceId',
                operator: 'EQUALS',
                value: this.spaceId
              },
              {
                field: 'st',
                operator: 'NE',
                value: 9
              }
            ],
            page: this.page,
            retOnlySt: false
          }
        }
        postHandle(
          '/api/v1/welder-sbtx-second/identification-card-comb/list',
          params
        ).then((res) => {
          this.tableLoading = false
          this.cardData = res.result
          this.ts = res.page.ts
        })
      },
      getData() {
        const req = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        const params1 = {
          d: {
            filters: [{
                field: 'pdCode',
                operator: 'EQUALS',
                value: 'weldingMethod'
              },
              {
                field: 'st',
                operator: 'NE',
                value: 9
              }
            ],
            page: {
              p: 1,
              ps: 9999
            },
            retOnlySt: false,
            sorts: [{
              field: 'ct',
              isDesc: true
            }]
          }
        }
        const params2 = {
          d: {
            filters: [{
                field: 'pdCode',
                operator: 'EQUALS',
                value: 'welderCertificated'
              },
              {
                field: 'st',
                operator: 'NE',
                value: 9
              }
            ],
            page: {
              p: 1,
              ps: 9999
            },
            retOnlySt: false,
            sorts: [{
              field: 'ct',
              isDesc: true
            }]
          }
        }
        const params3 = {
          d: {
            filters: [{
                field: 'pdCode',
                operator: 'EQUALS',
                value: 'losslessDet'
              },
              {
                field: 'st',
                operator: 'NE',
                value: 9
              }
            ],
            page: {
              p: 1,
              ps: 9999
            },
            retOnlySt: false,
            sorts: [{
              field: 'ct',
              isDesc: true
            }]
          }
        }
        const params4 = {
          d: {
            filters: [{
                field: 'spaceId',
                operator: 'EQUALS',
                value: this.spaceId
              },
              {
                field: 'st',
                operator: 'NE',
                value: 9
              }
            ],
            retOnlySt: false,
            sorts: [{
              field: 'ct',
              isDesc: true
            }]
          }
        }

        // postHandle(
        //   "/api/v1/welder-sbtx-second/project-info-comb/show-space",
        //   params4
        // ).then((res) => {
        //   this.obj.welderNumber = res.result.welderNumber;
        //   this.obj.name = res.result.screenName;
        // });

        postHandle(
          '/api/v1/welder-sbtx-second/welded-joint-info-comb/list',
          params4
        ).then((res) => {
          this.weldNumList = res.result
        })
        postHandle('/api/v1/welder-sbtx-second/crafts-info-comb/list', req).then(
          (res) => {
            this.craftsInfoList = res.result
          }
        )
        postHandle('/api/v1/welder-sbtx-second/dictionary', params1).then((res) => {
          this.methodsList = res.result
        })
        postHandle('/api/v1/welder-sbtx-second/dictionary', params2).then((res) => {
          this.projectList = res.result
        })
        postHandle('/api/v1/welder-sbtx-second/dictionary', params3).then((res) => {
          this.detectionList = res.result
        })
      },
      // 添加事件
      addHandle() {
        this.show = false
        this.viewShow = true
        this.title = '新增'
        if (!this.obj.welderNumber && !this.obj.name) {
          this.getData()
        }
      },
      // 添加与编辑的提交事件
      appendHandle() {
        let weldNum = this.obj.weldNum.join(',')
        let welderCertificatedId = this.obj.welderCertificatedId.join(',')
        let weldingMethodId = this.obj.weldingMethodId.join(',')
        let losslessDetId = this.obj.losslessDetId.join(',')
        const params = {
          d: {
            filters: [{
              field: 'st',
              operator: 'NE',
              value: 9
            }],
            retOnlySt: false
          },
          obj: {
            productNum: this.obj.productNum,
            drawingNum: this.obj.drawingNum,
            rulesNum: this.obj.rulesNum,
            welderCertificatedId: welderCertificatedId,
            weldNum: weldNum,
            craftsId: this.obj.craftsId,
            flawDetection: this.obj.flawDetection,
            losslessDetId: losslessDetId,
            weldingMethodId: weldingMethodId,
            image: this.obj.image,
            spaceId: this.spaceId,
            craftsNum: this.craftsNum.craftsNumber,
            // welderNumber: this.obj.welderNumber,
            logo: this.obj.logo
          }
        }
        if (this.title == '新增') {
          postHandle(
              '/api/v1/welder-sbtx-second/identification-card-comb/create',
              params
            )
            .then((res) => {
              this.getTable()
              this.show = true
              this.$message.success('添加成功')
              setTimeout(() => {
                this.show = true
              }, 2000)
            })
        } else {
          postHandle(
              '/api/v1/welder-sbtx-second/identification-card-comb/update/' + this.id,
              params
            )
            .then((res) => {
              this.title = '编辑'
              this.$message.success('编辑成功')
              this.getTable()
              setTimeout(() => {
                this.show = true
              }, 2000)
            })
            .catch((res) => {
              this.$message.error('编辑失败')
            })
        }
      },
      // 下拉事件
      onChange(value) {
        this.craftsNum = this.craftsInfoList.find((item) => item.id === value)
        const params = {
          d: {
            filters: [{
                field: 'craftsId',
                operator: 'EQUALS',
                value: value
              },
              {
                field: 'st',
                operator: 'NE',
                value: 9
              }
            ],
            page: {
              p: 1,
              ps: 10
            },
            retOnlySt: false,
            sorts: [{
              field: 'sort',
              isDesc: false
            }]
          }
        }
        postHandle('/api/v1/welder-sbtx-second/weld-info', params).then((res) => {
          this.tableData = res.result
        })
      },
      // 查看详情事件
      viewHandle(value) {
        // 保存每行ID
        if (value) {
          this.id = value.id
        }
        this.show = false
        this.viewShow = false
        const params = {
          d: {
            filters: [{
              field: 'st',
              operator: 'NE',
              value: 9
            }],
            retOnlySt: false
          }
        }
        postHandle(
          '/api/v1/welder-sbtx-second/identification-card-comb/show/' + this.id,
          params
        ).then((res) => {
          this.obj = res.result
          console.log(this.obj)
          // this.obj.name = this.obj.projectInfo ?
          //   this.obj.projectInfo.screenName :
          //   ''
          this.$set(this.obj, 'name', this.obj.projectInfo ? this.obj.projectInfo.screenName : '')
          this.obj.weldNum = this.obj.weldNum ? this.obj.weldNum.split(',') : []
          this.obj.weldingMethodId = this.obj.weldingMethodList.map(
            (item) => item.id
          )
          this.obj.welderCertificatedId = this.obj.welderCertificatedList.map(
            (item) => item.id
          )
          this.obj.losslessDetId = this.obj.losslessDetList.map(
            (item) => item.id
          )
          this.onChange(this.obj.craftsId)
        })
      },
      // 编辑事件
      editHandle(value) {
        this.show = false
        this.viewHandle(value)
        this.getData()
        this.title = '编辑'
        this.viewShow = true
      },
      handleSelectionChange(value) {
        this.ids = value.map((item) => item.id)
      },
      // 批量删除
      deleteHandle() {
        if (this.ids && this.ids.length > 0) {
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
              const params = {
                d: {
                  filters: [{
                    field: 'st',
                    operator: 'NE',
                    value: 9
                  }],
                  page: {
                    p: 1,
                    ps: 10
                  },
                  retOnlySt: false
                },
                obj: {
                  ids: this.ids
                }
              }
              postHandle(
                  '/api/v1/welder-sbtx-second/identification-card-comb/remove-batch',
                  params
                )
                .then((res) => {
                  this.getTable()
                  this.$message.success('删除成功')
                })
                .catch((res) => {
                  this.$message.error('删除失败')
                })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        } else {
          this.$message.error('请选择要删除的数据')
        }
      },
      weldHandle(value) {
        console.log(value)
        this.weldShow = false
        this.cardId = value.id
      },
      closepop() {
        this.weldShow = true
        this.show = true
      },
      returnHandle() {
        this.show = true
        if (this.obj) {
          this.obj = {}
        }
        if (this.tableData) {
          this.tableData = []
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .body-box {
    background: #ffffff;
  }

  table tr {
    height: 50px;
  }

  table td {
    text-align: center;
  }

  .text-color {
    color: red;
  }

  .text-size {
    font-size: 25px;
    letter-spacing: 30px;
    font-weight: 550;
    height: 80px;
    position: relative;
  }

  .text-size img {
    height: 60px;
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .text-size img,
  .text-size span {
    vertical-align: middle;
  }

  .el-button--primary {
    float: right;
    margin-right: 50px;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .el-input--medium {
    width: 80%;
  }

  ::v-deep .add-btn {
    margin-right: 87.5%;

    .el-button--medium {
      width: 140px !important;
    }
  }

  .close {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 23px;
    font-weight: 600;
    margin-top: 20px;
    margin-left: 40px;
  }

  .btn-box {
    display: flex;

    .add-btns {
      margin-left: 5%;
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 50px;
  }

  ::v-deep .image {
    .avatar-uploader-icon {
      height: 100px;
      width: 100px;
      float: left;
      line-height: 100px;
    }

    .avatar {
      height: 100px;
      width: 100px;
    }
  }
</style>